<template>
  <div class="wxPay wrapper_1200">
    <div class="header">
      <span class="home"><nuxt-link to="/">首頁</nuxt-link> > 確认訂單 ></span> 訂單号：{{
        orderId
      }}
    </div>
    <div class="wrapper">
      <div class="title acea-row row-between-wrapper">
        <div>
          支付寶支付
          <span v-if="currency" class="currency-info">（{{ currency }}）</span>
        </div>
        <div class="amount">
          应付金額：<span class="num font-color">{{ totalPrice }}</span
          >元
        </div>
      </div>
      <div class="acea-row row-center-wrapper">
        <div class="wx">
          <div class="pictrue">
            <client-only>
              <vue-qr
                class="bicode"
                :logoSrc="logo"
                :text="codeUrl"
                :size="310"
              ></vue-qr>
            </client-only>
          </div>
          <div class="text acea-row row-center-wrapper">
            <div class="iconfont icon-saoyisao"></div>
            <div>
              <div>请使用支付寶掃壹掃</div>
              <div class="tip">掃描二维碼支付</div>
            </div>
          </div>
        </div>
        <div class="phone"><img src="../assets/images/alipay.png" /></div>
      </div>
      <div class="selectPay" @click="Return">
        <span class="iconfont icon-fanhui"></span>選擇其他支付方式
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "wxPay",
  auth: "guest",
  data() {
    return {
      orderId: 0,
      totalPrice: 0,
      codeUrl: "",
      logo: "",
      invalid: 0,
      endTime: "",
      timeName: null,
      quitUrl: "",
      currency: "",
    };
  },
  // async asyncData({app, query}){
  //   let [ payMsg ] = await Promise.all([
  //     app.$axios.post('/order/pay',{
  //       uni: query.orderId,
  //       paytype: 'weixin',
  //       'from': 'pc'
  //     }),
  //   ]);
  //   return {
  //     orderId:query.orderId,
  //     totalPrice:query.totalPrice,
  //     codeUrl:payMsg.data.result.jsConfig.code_url,
  //     logo:'',
  //     // logo:payMsg.data.result.jsConfig.logo,
  //     invalid:payMsg.data.result.jsConfig.invalid
  //   }
  // },
  watch: {
    endTime(n) {
      if (n === 0) {
        clearInterval(this.timeName);
      }
    },
  },
  fetch({ store }) {
    store.commit("isHeader", true);
    store.commit("isFooter", true);
  },
  head() {
    return {
      title: "支付寶支付-" + this.$store.state.titleCon,
    };
  },
  created() {
    this.orderId = this.$route.query.orderId;
    this.totalPrice = this.$route.query.totalPrice;
    this.currency = this.$route.query.currency || '';
    // this.wxSuccess()
  },
  mounted() {
    this.quitUrl =
      window.location.protocol +
      "//" +
      window.location.host +
      "/order_detail" +
      `?orderId=${this.orderId}`;
    this.goAli();
  },
  beforeDestroy() {
    clearInterval(this.timeName);
  },
  methods: {
    aliSuccess() {
      let that = this;
      that.$axios
        .get("/pc/check_order_status/" + that.orderId + "/" + that.invalid)
        .then((res) => {
          that.endTime = res.data.time;
          if (res.data.status) {
            clearInterval(that.timeName);
            that.$message.success("支付成功");
            that.$store.commit("cartNum", 0);
            that.getOrderCoupon(that.orderId);
            setTimeout(function () {
              that.$router.replace({
                path: "/order_detail",
                query: { orderId: that.orderId },
              });
            }, 1000);
          }
        })
        .catch((err) => {
          that.$message.error(err);
          setTimeout(function () {
            that.$router.replace({ path: "/" });
          }, 1000);
        });
    },
    //支付成功發送優惠券；
    getOrderCoupon(orderId) {
      let that = this;
      that.$axios.post("/v2/order/product_coupon/" + orderId).then((res) => {});
    },
    Return() {
      this.$router.go(-1);
    },
    goAli() {
      let that = this;
      let payData = {
        uni: that.orderId,
        paytype: "alipay",
        from: "pc",
        quitUrl: this.quitUrl,
      };
      
      // 如果选择了货币，添加到请求数据中
      if (that.currency) {
        payData.currency = that.currency;
      }
      
      that.$axios
        .post("/order/pay", payData)
        .then((res) => {
          that.codeUrl = res.data.result.jsConfig.qrCode;
          that.invalid = res.data.result.jsConfig.invalid;
          this.timeName = setInterval(() => {
            this.aliSuccess();
          }, 2000);
        })
        .catch((err) => {
          that.$message.error(err);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.wxPay {
  .header {
    color: #999999;
    height: 60px;
    line-height: 60px;
    .home {
      color: #282828;
    }
  }
  .wrapper {
    padding: 26px 30px;
    background-color: #fff;
    .title {
      margin-bottom: 51px;
      font-size: 20px;
      .currency-info{
        font-size: 16px;
        color: #1676ff;
        font-weight: 500;
        margin-left: 8px;
      }
      .amount {
        font-size: 14px;
        color: #969696;
        .num {
          font-size: 22px;
          font-weight: bold;
        }
      }
    }
    .wx {
      width: 310px;
      .pictrue {
        width: 100%;
        height: 310px;
        border: 1px solid #ccc;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        width: 100%;
        height: 72px;
        background-color: #1676ff;
        color: #fff;
        font-size: 14px;
        margin-top: 16px;
        .iconfont {
          font-size: 50px;
          margin-right: 30px;
        }
        .tip {
          margin-top: 4px;
        }
      }
    }
    .phone {
      margin-left: 144px;
      width: 262px;
      height: 399px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .selectPay {
      font-size: 16px;
      color: #236fe9;
      margin-top: 68px;
      cursor: pointer;
      .iconfont {
        margin-right: 16px;
        font-size: 15px;
      }
    }
  }
}
</style>
